import React, { useState, useEffect, useRef } from 'react';

interface VoiceIconProps {
    isPlaying?: boolean;
    className?: string;
    size?: number;
}

const VoiceIcon: React.FC<VoiceIconProps> = ({
    isPlaying = false,
    className = "",
    size = 16
}) => {
    const [state, setState] = useState(0);
    const intervalRef = useRef<NodeJS.Timeout | null>(null);
    const [isAnimating, setIsAnimating] = useState(false);


    // 当播放状态改变时控制动画
    useEffect(() => {

        if (isPlaying) {
            // 开始动画（避免重复启动）
            if (!isAnimating) {
                setIsAnimating(true);
                setState(0); // 从只显示圆形开始（同时隐藏橙色和蓝色螺旋）

                // 设置动画间隔，让状态0也有足够的显示时间
                intervalRef.current = setInterval(() => {
                    setState(prevState => {
                        // 动画序列：0(只圆形) → 1(圆形+蓝色) → 2(圆形+蓝色+橙色) → 0(只圆形) → 循环
                        const nextState = (prevState + 1) % 3;
                        return nextState;
                    });
                }, 500); // 每500ms切换一次状态，让每个状态都有相同的显示时间

            }
        } else {
            // 停止动画
            if (isAnimating) {
                if (intervalRef.current) {
                    clearInterval(intervalRef.current);
                    intervalRef.current = null;
                }
                setIsAnimating(false);
                // 停止时不改变state，保持当前状态，让静态样式接管
            }
        }

        return () => {
            if (intervalRef.current) {
                clearInterval(intervalRef.current);
            }
        };
    }, [isPlaying]); // 只依赖isPlaying，避免isAnimating导致的循环问题

    // 组件卸载时清理
    useEffect(() => {
        return () => {
            if (intervalRef.current) {
                clearInterval(intervalRef.current);
            }
        };
    }, []);

    const getElementStyle = (elementType: 'orange' | 'blue' | 'circle') => {
        const baseStyle = {
            opacity: 1,
            transition: 'opacity 0.3s ease', // 缩短过渡时间，与动画间隔协调
        };

        if (!isAnimating) {
            // 静态状态（非播放时）：全部显示，但蓝色保持70%透明度
            if (elementType === 'blue') {
                return { ...baseStyle, opacity: 1 };
            }
            return baseStyle;
        }

        // 动画状态定义：
        // 状态0：只显示圆形（橙色和蓝色螺旋同时隐藏）
        // 状态1：圆形 + 蓝色螺旋（橙色螺旋隐藏）
        // 状态2：圆形 + 蓝色螺旋 + 橙色螺旋（全部显示）
        let resultOpacity = 1;

        switch (elementType) {
            case 'circle':
                resultOpacity = 1; // 圆形始终显示
                break;
            case 'blue':
                resultOpacity = state >= 1 ? 0.7 : 0; // 状态1和2时显示，保持70%透明度
                break;
            case 'orange':
                resultOpacity = state >= 2 ? 1 : 0; // 只在状态2时显示
                break;
            default:
                resultOpacity = 1;
        }

        return {
            ...baseStyle,
            opacity: resultOpacity,
        };
    };

    return (
        <div className={`inline-block ${className}`}>
            <svg
                width={size}
                height={size}
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                style={{ filter: 'drop-shadow(0 0 3px rgba(156, 163, 175, 0.3))' }}
            >
                {/* 橙色螺旋 */}
                <path
                    d="M584.106667 954.112a601.258667 601.258667 0 0 0 203.093333-450.133333A603.477333 603.477333 0 0 0 601.429333 70.144L671.573333 0a693.418667 693.418667 0 0 1 214.954667 503.808A700.842667 700.842667 0 0 1 653.994667 1024l-69.888-69.888z"
                    fill="rgb(156, 163, 175)"
                    style={getElementStyle('orange')}
                />

                {/* 蓝色螺旋 */}
                <path
                    d="M357.802667 727.893333A264.192 264.192 0 0 0 482.986667 503.893333c0-82.517333-39.253333-160.682667-105.045334-210.261333l70.485334-70.485333a360.362667 360.362667 0 0 1 133.717333 280.746666 362.752 362.752 0 0 1-152.746667 295.509334l-71.594666-71.594667z"
                    fill="rgb(156, 163, 175)"
                    style={getElementStyle('blue')}
                />

                {/* 圆形（始终显示） */}
                <path
                    d="M202.922667 595.712a75.093333 75.093333 0 0 1 0-149.930667 75.093333 75.093333 0 0 1 0 149.930667z"
                    fill="rgb(156, 163, 175)"
                    style={getElementStyle('circle')}
                />
            </svg>
        </div>
    );
};

export default VoiceIcon;
